{extend name='public/base' /}

{block name="style"}
{css href="/static/inspinia/css/plugins/dropzone/dropzone.css" /}
{/block}

{block name="breadcrumb"}
{$crumbs}
{/block}

{block name="body"}
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="row">
                <div class="col-sm-8 b-r">
                    <h3 class="m-t-none m-b"></h3>
                    <form role="form" action="{:url('save_nav')}" method="post" autocomplete="off" data-form="form">
                        <div class="form-group">
                            <label>导航名称</label>
                            <input type="text" name="name" placeholder="accounts" class="form-control" value="{$nav.name|default=''}">
                        </div>
                        <div class="form-group">
                            <label>导航连接</label>
                            <input type="text" name="url" placeholder="accounts" class="form-control" value="{$nav.url|default=''}">
                            <strong>说明</strong>
                            <p>
                                链接格式：所有子导航直接在主导航后面加上对应的ID，ID在添加完对应的内容后可以在后台查获，如果要添加主导航，请联系开发者
                                <br />
                                主导航列表
                                <br />
                                {volist name="navs_url" id="vo"}
                                {$vo.name}:{$vo.url}
                                <br />
                                {/volist}
                            </p>
                        </div>
                        <div class="form-group">
                            <label>上级导航</label>
                            <select class="select2_demo_1 form-control" name="pid">
                                <option value="0">顶级导航</option>
                                {volist name="navs" id="vo"}
                                <option value="{$vo.id}" {eq name="vo.id" value="$nav.pid|default=0"}selected{/eq}>{$vo.level|str_repeat=' -- ', ###}{$vo.name} </option>
                                {/volist}
                            </select>
                        </div>
                        <div>
                            <input type="hidden" name="image" value="">
                            <input type="hidden" name="id" value="{$nav.id|default=0}">
                            <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>确定</strong></button>
                        </div>
                    </form>
                </div>
                <div class="col-sm-4 b-r">
                    <div class="ibox-content">

                        <form id="my-awesome-dropzone" class="dropzone" action="{:url('common/upload_image', ['type' => 'nav'])}" style="min-height: 160px;">
                            <div class="dropzone-previews"></div>
                            <button type="submit" class="btn btn-primary pull-right">提交</button>
                        </form>
                        <img style="max-width: 300px; max-height: 200px; margin-top: 20px;" class="image" src="/uploads/nav/{$nav.image|default=''}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<!-- Select2 -->
{js href="/static/inspinia/js/plugins/select2/select2.full.min.js" /}
{js href="/static/inspinia/js/plugins/dropzone/dropzone.js" /}
<script>
    $(document).ready(function(){

        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            // Dropzone settings
            init: function() {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function() {
                });
                this.on("successmultiple", function(files, response) {
                    //window.location.reload();
                    console.log(files);
                    console.log(response);
                    if (response.code == 200) {
                        $('input[name="image"]').val(response.data.path);
                        $(".image").attr('src', '/uploads/nav/' + response.data.path);
                    }
                });
                this.on("errormultiple", function(files, response) {
                });
            }
        }
    });
</script>
{/block}